/**
 * 种质资源统计
 */
Vue.component('zzzytj-component', {
    template: `
        <div class="germplasm-resource-box">
            <div class="germplasm-resource-top">
                <div class="germplasm-resource-half">
                    <div class="germplasm-resource-half-img">
                        <p>
                            <span>{{zzzytjData.germplasmCount}}</span>
                            <span>个</span>
                        </p>
                    </div>
                    <span>种质种类</span>
                </div>
                <div class="germplasm-resource-half">
                    <div class="germplasm-resource-half-img">
                        <p>
                            <span>{{zzzytjData.cropCount}}</span>
                            <span>个</span>
                        </p>
                    </div>
                    <span>品种数量</span>
                </div>
                <div class="germplasm-resource-half">
                    <div class="germplasm-resource-half-img">
                        <p>
                            <span>{{zzzytjData.sampleCount}}</span>
                            <span>个</span>
                        </p>
                    </div>
                    <span>资源数量</span>
                </div>
            </div>
            <p>作物种类占比</p>
            <div class="germplasm-resource-bottom">
                <div id="germplasm-resource-chart" v-if="zzzytjTypeData.length"></div>
                <no-data-component v-show="!zzzytjTypeData.length"></no-data-component>
            </div>
        </div>
    `,
    data() {
        return {
            // 种质资源统计数据
            zzzytjData: {
                sampleCount: 0,
                germplasmCount: 0,
                cropCount: 0,
            },
            // 种质资源类型数据
            zzzytjTypeData: [],
        };
    },
    methods: {
        /**
         * 获取种质资源统计数据
         */
        getZzzytjData() {
            let params = {};
            tpHttp.post(
                this,
                'action=com.top.xjzykt.germplasm.dp.statGermplasmResource',
                { param: JSON.stringify(params) },
                (data, code, message) => {
                    if (code == 0 && data) {
                        let { sampleCount, germplasmCount, cropCount } = data;
                        this.zzzytjData = {
                            sampleCount: sampleCount || 0,
                            germplasmCount: germplasmCount || 0,
                            cropCount: cropCount || 0,
                        };
                    } else {
                        this.zzzytjData = {
                            sampleCount: 0,
                            germplasmCount: 0,
                            cropCount: 0,
                        };
                    }
                }
            );
        },
        /**
         * 获取种质资源类型数据
         */
        getZzzyTypeData() {
            let params = {};
            tpHttp.post(
                this,
                'action=com.top.xjzykt.germplasm.dp.statCropClassify',
                { param: JSON.stringify(params) },
                (data, code, message) => {
                    if (code == 0 && data && data.length) {
                        this.zzzytjTypeData = data;
                        let seriesData = data.map((item) => {
                            return {
                                name: item.crop_classify_name,
                                value: item.number,
                            };
                        });
                        this.$nextTick(() => {
                            zzzytjChartInit(seriesData);
                        });
                    } else {
                        this.zzzytjTypeData = [];
                    }
                }
            );
        },
        /**
         * 初始化种质资源统计
         */
        initZzzytjChart() {},
    },
    mounted() {
        this.getZzzytjData();
        this.getZzzyTypeData();
    },
});
/**
 * 种质来源分布
 */
Vue.component('zzlyfb-component', {
    props: {
        // 种质分布数据
        zzlyfbInfo: {
            type: Object,
            default: () => {},
        },
    },
    template: `
        <div class="distribution-germplasm-box">
            <div class="distribution-germplasm-top">
                <div class="distribution-germplasm-half">
                    <p>
                        <span>{{zzlyfbData.domestic}}</span>
                        <span>个</span>
                    </p>
                    <p>国内品种数量</p>
                </div>
                <div class="distribution-germplasm-half">
                    <p>
                        <span>{{zzlyfbData.foreign}}</span>
                        <span>个</span>
                    </p>
                    <p>国外引进品种数量</p>
                </div>
            </div>
            <div class="distribution-germplasm-bottom">
                <div id="distribution-germplasm-chart" v-if="zzlyfbChartData.length"></div>
                <no-data-component v-show="!zzlyfbChartData.length"></no-data-component>
                <div class="variety-collection-btn">
                    <span :class="zzlyfbType == item.value?'active':''" v-for="(item,index) in zzlyfbTypeList" :key="index + 'zzly'" @click="zzlyTypeClick(item)">{{item.name}}</span>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 种质来源分布数据
            zzlyfbData: {
                domestic: 0,
                foreign: 0,
            },
            // 种质来源分布数据
            zzlyfbChartData: [],
            // 获取种质来源类型  1 国内 2 国外
            zzlyfbType: 1,
            zzlyfbTypeList: [
                { name: "国内", value: 1 },
                { name: "国外", value: 2 },
            ],
            // 种质来源分布echarts  实例
            chartsExample: null
        };
    },
    watch: {
        zzlyfbInfo: {
            handler(val) {
                this.getZzlyfbData();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        /**
         * 种质来源类型点击
         * @param {*} item 
         */
        zzlyTypeClick(item) {
            this.zzlyfbType = item.value;
            this.getZzlyfbData();
        },
        /**
         * 获取种质来源分布数据
         */
        getZzlyfbData() {
            if (this.zzlyfbInfo && (this.zzlyfbInfo.domesticList || this.zzlyfbInfo.foreignList)) {
                let { domestic, foreign, domesticList, foreignList } = this.zzlyfbInfo;
                this.zzlyfbData = {
                    domestic: domestic || 0,
                    foreign: foreign || 0,
                };
                if (this.zzlyfbType == 1) {
                    this.zzlyfbChartData = domesticList;
                } else {
                    this.zzlyfbChartData = foreignList;
                }
                
                let xAxisData = [],
                    seriesData = [];
                this.zzlyfbChartData.forEach((item) => {
                    xAxisData.push(item.name);
                    seriesData.push(item.number);
                });
                this.$nextTick(() => {
                    if (this.chartsExample) {
                        this.chartsExample.dispose();
                        this.chartsExample = null;
                    }
                    this.chartsExample = zzlyfbChartInit(xAxisData, seriesData, '个');
                });
            } else {
                this.zzlyfbData = {
                    domestic: 0,
                    foreign: 0,
                };
                this.zzlyfbChartData = [];
            }
        },
    },
    mounted() {},
});
/**
 * 品种采集统计
 */
Vue.component('pzcjtj-component', {
    template: `
        <div class="variety-collection-statistics">
            <div class="variety-collection-top">
                <div class="variety-collection-box">
                    <span>本月新增品种资源数量</span>
                    <p>
                        <span>{{pzcjtjData.monthCount}}</span>
                        <span>个</span>
                    </p>
                </div>
                <div class="variety-collection-box">
                    <span>本年新增品种资源数量</span>
                    <p>
                        <span>{{pzcjtjData.yearCount}}</span>
                        <span>个</span>
                    </p>
                </div>
            </div>
            <div class="variety-collection-bottom">
                <div id="variety-collection-chart" v-if="pzcjtjChartData.length"></div>
                <no-data-component v-show="!pzcjtjChartData.length"></no-data-component>
            </div>
        </div>
    `,
    data() {
        return {
            // 品种采集统计数据
            pzcjtjData: {
                yearCount: 0,
                monthCount: 0,
            },
            // 品种采集曲线数据
            pzcjtjChartData: [],
        };
    },
    methods: {
        /**
         * 获取品种采集统计数据
         */
        getPzcjtjData() {
            let params = {};
            tpHttp.post(
                this,
                'action=com.top.xjzykt.germplasm.dp.statSampleYearMonthCount',
                { param: JSON.stringify(params) },
                (data, code, message) => {
                    if (code == 0 && data) {
                        let { yearCount, monthCount } = data;
                        this.pzcjtjData = {
                            yearCount: yearCount || 0,
                            monthCount: monthCount || 0,
                        };
                    } else {
                        this.pzcjtjData = {
                            yearCount: 0,
                            monthCount: 0,
                        };
                    }
                }
            );
        },
        /**
         * 初始品种采集统计图表
         */
        initpzcjtjChart2() {
            let startDate = tpUtils.parseTime(new Date().getTime() - 3600 * 24 * 180 * 1000, '{y}-{m}-{d}');
            let endDate = tpUtils.parseTime(new Date(), '{y}-{m}-{d}');
            let params = { startDate: startDate, endDate: endDate };
            tpHttp.post(
                this,
                'action=com.top.xjzykt.germplasm.dp.loadSampleStatData',
                { param: JSON.stringify(params) },
                (data, code, message) => {
                    if (code == 0 && data && data.length) {
                        this.pzcjtjChartData = data;
                        let xAxisData = [],
                            seriesData = [];
                        data.forEach((item) => {
                            xAxisData.push(item.date);
                            seriesData.push(item.count);
                        });
                        this.$nextTick(() => {
                            pzcjtjChartInit(xAxisData, seriesData, '个');
                        });
                    }
                }
            );
        },
        initpzcjtjChart() {
            let startDate = tpUtils.parseTime(new Date().getTime() - 3600 * 24 * 180 * 1000, '{y}-{m}-{d}');
            let endDate = tpUtils.parseTime(new Date(), '{y}-{m}-{d}');
            let params = { startDate: startDate, endDate: endDate, statType: 2 };
            tpHttp.post(
                this,
                'action=com.top.xjzykt.digital.twin.sampleAddNumTrend',
                { param: JSON.stringify(params) },
                (data, code, message) => {
                    if (code == 0 && data && data.length) {
                        this.pzcjtjChartData = data;
                        let xAxisData = [],
                            seriesData = [];
                        data.forEach((item) => {
                            xAxisData.push(item.stat_date);
                            seriesData.push(item.add_num);
                        });
                        this.$nextTick(() => {
                            pzcjtjChartInit(xAxisData, seriesData, '个');
                        });
                    }
                }
            );
        },
    },
    mounted() {
        this.getPzcjtjData();
        this.initpzcjtjChart();
    },
});

/**
 * 近期新增品种
 */
Vue.component('jqxzpz-component', {
    template: `
        <div class="newly-added-varieties">
            <div class="newly-added-varieties-head">
                <span>品种名称</span>
                <span>种质分类</span>
                <span>资源数量</span>
                <span>新增时间</span>
            </div>
            <div class="newly-added-varieties-table">
                <ul v-if="jqxzpzData.length">
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item, index) in jqxzpzData" :key="index">
                                <li>
                                    <span :title="item.crop_name">{{item.crop_name}}</span>
                                    <span :title="item.crop_classify_name">{{item.crop_classify_name}}</span>
                                    <span :title="item.sample_count">{{item.sample_count}}</span>
                                    <span :title="item.create_time">{{item.create_time && item.create_time.substr(0,10)}}</span>
                                </li>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </ul>
                <ul v-show="!jqxzpzData.length">
                    <no-data-component></no-data-component>
                </ul>
            </div>
        </div>
    `,
    data() {
        return {
            // 近期新增品种数据
            jqxzpzData: [],
        };
    },
    methods: {
        /**
         * 获取近期新增品种
         */
        getJqxzpzData() {
            let params = { rank: 15 };
            tpHttp.post(
                this,
                'action=com.top.xjzykt.germplasm.dp.loadCropListTopRank',
                { param: JSON.stringify(params) },
                (data, code, message) => {
                    if (code == 0 && data && data.length) {
                        this.jqxzpzData = data;
                        this.$nextTick(() => {
                            this.initSwiper();
                        });
                    } else {
                        this.jqxzpzData = [];
                    }
                }
            );
        },
        /**
         * 初始化轮播
         */
        initSwiper() {
            var swiper = new Swiper('.mySwiper', {
                direction: 'vertical',
                slidesPerView: 'auto',
                spaceBetween: 10,
                autoplay: {
                    delay: 1500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                },
            });
        },
    },
    mounted() {
        this.getJqxzpzData();
    },
});

/**
 * 种质申领记录
 */
Vue.component('zzsljl-component', {
    template: `
        <div class="newly-added-varieties">
            <div class="newly-added-varieties-head">
                <span>品种名称</span>
                <span>申领单位</span>
                <span>申领数量</span>
                <span>申领时间</span>
            </div>
            <div class="newly-added-varieties-table">
                <ul v-if="zzsljlData.length">
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item, index) in zzsljlData" :key="index">
                                <li>
                                    <span :title="item.crop_name">{{item.crop_name}}</span>
                                    <span :title="item.unit_name">{{item.unit_name}}</span>
                                    <span :title="item.apply_num">{{item.apply_num}}</span>
                                    <span :title="item.apply_time">{{item.apply_time && item.apply_time.substr(0,10)}}</span>
                                </li>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </ul>
                <ul v-show="!zzsljlData.length">
                    <no-data-component></no-data-component>
                </ul>
            </div>
        </div>
    `,
    data() {
        return {
            // 种质申领记录数据
            zzsljlData: [],
        };
    },
    methods: {
        /**
         * 获取种质申领记录
         */
        getJqxzpzData() {
            let params = { rank: 15 };
            tpHttp.post(
                this,
                'action=com.top.xjzykt.germplasm.dp.getApplyListTopRank',
                { param: JSON.stringify(params) },
                (data, code, message) => {
                    if (code == 0 && data && data.length) {
                        this.zzsljlData = data;
                        this.$nextTick(() => {
                            this.initSwiper();
                        });
                    } else {
                        this.zzsljlData = [];
                    }
                }
            );
        },
        /**
         * 初始化轮播
         */
        initSwiper() {
            var swiper = new Swiper('.mySwiper', {
                direction: 'vertical',
                slidesPerView: 'auto',
                spaceBetween: 10,
                autoplay: {
                    delay: 1500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                },
            });
        },
    },
    mounted() {
        this.getJqxzpzData();
    },
});




const chartAutoresizeMixin = {
    data() {
        return {
            $_sidebarElm: null,
            $_resizeHandler: null,
        };
    },
    mounted() {
        this.initListener();
    },
    activated() {
        if (!this.$_resizeHandler) {
            // avoid duplication init
            this.initListener();
        }

        // when keep-alive chart activated, auto resize
        this.resize();
    },
    beforeDestroy() {
        this.destroyListener();
    },
    deactivated() {
        this.destroyListener();
    },
    methods: {
        // use $_ for mixins properties
        // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
        $_sidebarResizeHandler(e) {
            if (e.propertyName === 'width') {
                this.$_resizeHandler();
            }
        },
        initListener() {
            this.$_resizeHandler = debounce(() => {
                this.resize();
            }, 100);
            window.addEventListener('resize', this.$_resizeHandler);

            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
            this.$_sidebarElm &&
                this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
        },
        destroyListener() {
            window.removeEventListener('resize', this.$_resizeHandler);
            this.$_resizeHandler = null;

            this.$_sidebarElm &&
                this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
        },
        resize() {
            const { chart } = this;
            chart && chart.resize();
        },
    },
};

/**
 * 中国地图初始化
 * @param {*} echarts 实例
 * @param {Array} data 面积渲染数据
 */
let geoJson = null;
Vue.component('px-map-chart', {
    mixins: [chartAutoresizeMixin],
    props: {
        zoom: {
            type: Number,
            default: 1,
        },
        // 种质分布数据
        zzlyfbInfo: {
            type: Object,
            default: () => {},
        },
        // 图例选中
        legendSelected: {
            type: Array,
            default: () => [1, 2]
        },
    },
    watch: {
        zzlyfbInfo: {
            handler() {
                setTimeout(() => {
                    this.initChart();
                }, 1000);
            },
            immediate: true,
        },
        legendSelected: {
            handler() {
                setTimeout(() => {
                    this.initChart();
                }, 300);
            },
            immediate: false,
        }
    },
    data() {
        return {
            chart: null,
            option: null,
            geoGpsMap: [87.617729, 43.792816],
        };
    },
    methods: {
        initChart() {
            let mapPointData = [],
                lineData = [];
            echarts.registerMap('chartMapSvg', {
                svg: chartMapSvg,
            });

            if (geoJson) {
                let arr = [];
                if (this.zzlyfbInfo.domesticList && this.zzlyfbInfo.domesticList.length && this.legendSelected.includes(1)) {
                    this.zzlyfbInfo.domesticList.forEach((item) => {
                        geoJson.features.forEach((v) => {
                            if (item.area_id == v.id) {
                                arr.push({
                                    lng: v.properties.cp[0],
                                    lat: v.properties.cp[1],
                                    value: item.number,
                                });
                            }
                        });
                    });
                }
                if (this.zzlyfbInfo.slList && this.zzlyfbInfo.slList.length && this.legendSelected.includes(2)) {
                    this.zzlyfbInfo.slList.forEach((item) => {
                        geoJson.features.forEach((v) => {
                            if (item.area_id == v.id) {
                                arr.push({
                                    lng: v.properties.cp[0],
                                    lat: v.properties.cp[1],
                                    value: item.number,
                                    type: 1
                                });
                            }
                        });
                    });
                }
                // arr = [{ "sale_volume": 333.00, "lng": "116.405289", "year": 2021, "sale_money": 333.00, "region_name": "北京", "id": 1, "lat": "39.904987" }, { "sale_volume": 222.00, "lng": "121.472641", "year": 2021, "sale_money": 222.00, "region_name": "上海", "id": 3, "lat": "31.231707" }, { "sale_volume": 123.00, "lng": "117.283043", "year": 2021, "sale_money": 123.00, "region_name": "安徽", "id": 4, "lat": "31.861191" }, { "sale_volume": 123.00, "lng": "108.948021", "year": 2021, "sale_money": 123.00, "region_name": "陕西", "id": 5, "lat": "34.263161" }, { "sale_volume": 123.00, "lng": "104.065735", "year": 2021, "sale_money": 123.00, "region_name": "四川", "id": 6, "lat": "30.659462" }, { "sale_volume": 123.00, "lng": "102.71225", "year": 2021, "sale_money": 123.00, "region_name": "云南", "id": 7, "lat": "25.040609" }, { "sale_volume": 123.00, "lng": "106.713478", "year": 2021, "sale_money": 123.00, "region_name": "贵州", "id": 8, "lat": "26.578342" }, { "sale_volume": 123.00, "lng": "91.13221", "year": 2021, "sale_money": 123.00, "region_name": "西藏", "id": 10, "lat": "29.66036" }, { "sale_volume": 123.00, "lng": "87.617729", "year": 2021, "sale_money": 123.00, "region_name": "新疆", "id": 11, "lat": "43.792816" }, { "sale_volume": 123.00, "lng": "111.670799", "year": 2021, "sale_money": 123.00, "region_name": "内蒙古", "id": 12, "lat": "40.81831" }, { "sale_volume": 123.00, "lng": "111.670799", "year": 2021, "sale_money": 123.00, "region_name": "内蒙古", "id": 13, "lat": "40.81831" }, { "sale_volume": 123.00, "lng": "108.320007", "year": 2021, "sale_money": 123.00, "region_name": "广西", "id": 14, "lat": "22.82402" }, { "sale_volume": 123.00, "lng": "113.28064", "year": 2021, "sale_money": 123.00, "region_name": "广东", "id": 15, "lat": "23.125177" }, { "sale_volume": 123.00, "lng": "118.76741", "year": 2021, "sale_money": 123.00, "region_name": "江苏", "id": 16, "lat": "32.041546" }, { "sale_volume": 123.00, "lng": "119.306236", "year": 2021, "sale_money": 123.00, "region_name": "福建", "id": 17, "lat": "26.075302" }]
                arr.forEach((item) => {
                    let fromCoord = [item.lng, item.lat];
                    if (fromCoord) {
                        if (item.type === 1) {
                            lineData.push({
                                coords:[
                                    this.geoGpsMap,fromCoord
                                ],
                                lineStyle: {
                                    normal: {
                                        color: '#FDE742',
                                        shadowColor: 'rgba(249,234,70,0.3)',
                                    },
                                },
                                effect: {
                                    color: '#FDE742',
                                }
                            });
                        } else {
                            lineData.push({
                                coords:[
                                    fromCoord,this.geoGpsMap
                                ],
                                lineStyle: {
                                    normal: {
                                        color: '#16EF44',
                                        shadowColor: 'rgba(61,236,79,0.3)',
                                    },
                                },
                                effect: {
                                    color: '#16EF44',
                                }
                            });
                        }
                    }
                    mapPointData.push({
                        value: fromCoord,
                    });
                });
            }
            let zoom = this.zoom || 1.1;

            const option = (this.option = {
                geo: [
                    {
                        map: 'china',
                        type: 'map',
                        zoom,
                        roam: false,
                        show: true,
                        silent: true,
                        layoutCenter: ['51%', '48.5%'],
                        layoutSize: '90%',
                        aspectScale: 0.85,
                        itemStyle: {
                            color: 'transparent',
                        },
                        regions: [
                            {
                                name: '南海诸岛',
                                itemStyle: {
                                    normal: {
                                        areaColor: '#4E9DE8',
                                        opacity: 1,
                                        label: {
                                            show: false,
                                            color: '#009cc9',
                                        },
                                    },
                                },
                            },
                        ],
                    },
                    {
                        map: 'chartMapSvg',
                        type: 'map',
                        zoom,
                        roam: false,
                        show: true,
                        silent: true,
                        layoutCenter: ['50%', '50.3%'],
                        layoutSize: '100%',
                        aspectScale: 0.85,
                        itemStyle: {},
                        regions: [
                            {
                                name: '南海诸岛',
                                itemStyle: {
                                    normal: {
                                        areaColor: '#4E9DE8',
                                        opacity: 0,
                                        label: {
                                            show: false,
                                            color: '#009cc9',
                                        },
                                    },
                                },
                            },
                        ],
                    },
                ],
                series: [
                    {
                        //最外层鼠标经过显示的黑框
                        name: '地图',
                        type: 'map',
                        silent: true,
                        layoutCenter: ['51%', '48%'],
                        layoutSize: '90%',
                        aspectScale: 0.79,
                        geoIndex: 2,
                        map: 'china',
                        roam: false,
                        zoom,
                        tooltip: {
                            trigger: 'item',
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'transparent',
                                borderWidth: 1,
                                areaColor: 'transparent',
                                show: false,
                            },
                            emphasis: {
                                borderColor: 'transparent',
                                borderWidth: 1,
                                areaColor: 'transparent',
                                show: false,
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                distance: 5,
                                color: 'white',
                                padding: 10,
                                borderRadius: 20,
                                // show: false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                    },

                    //地图线的动画效果
                    {
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            color: '#16EF44',
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 7, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: '#16EF44',
                                shadowColor: 'rgba(61,236,79,0.3)',
                                shadowBlur: 5,
                                width: 2, //尾迹线条宽度
                                opacity: 1, //尾迹线条透明度
                                curveness: 0.3, //尾迹线条曲直度
                            },
                        },
                        data: lineData,
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        showEffectOn: 'render',
                        zlevel: 1,
                        rippleEffect: {
                            period: 15,
                            scale: 4,
                            brushType: 'fill',
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                offset: [15, 0],
                                color: '#FFBA01',
                                show: true,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFBA01',
                            },
                        },
                        symbolSize: 5,
                        data: mapPointData,
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        showEffectOn: 'render',
                        zlevel: 10,
                        rippleEffect: {
                            period: 15,
                            scale: 4,
                            brushType: 'fill',
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                offset: [15, 0],
                                color: '#FFBA01',
                                show: true,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFBA01',
                            },
                        },
                        symbol: 'image://./img/map-marker.png',
                        symbolSize: 155,
                        symbolOffset: [2, -12],
                        data: [{ value: this.geoGpsMap }],
                    },
                ],
            });

            if (!this.$el) return;
            const chart = (this.chart = echarts.init(this.$el));

            if (geoJson) {
                echarts.registerMap('china', geoJson);
                chart.setOption(option, true);
            } else {
                axios.get('./100000.json').then((resp) => {
                    geoJson = resp.data;
                    echarts.registerMap('china', geoJson);
                    chart.setOption(option, true);
                });
            }
        },
    },
    mounted() {
        this.initChart();
    },
    template: `
        <div style='width:100%;height:100%;'></div>
    `,
});

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func, wait, immediate) {
    let timeout, result;

    const debounced = function () {
        const context = this;
        const args = arguments;

        if (timeout) {
            clearTimeout(timeout);
        }
        if (immediate) {
            // 如果已经执行过，不再执行
            const callNow = !timeout;
            timeout = setTimeout(function () {
                timeout = null;
            }, wait);
            if (callNow) {
                result = func.apply(context, args);
            }
        } else {
            timeout = setTimeout(function () {
                func.apply(context, args);
            }, wait);
        }

        return result;
    };

    debounced.cancel = function () {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}
